<%@include file="../../../fragments/_taglibs.jsp" %>
<%@include file="../../../fragments/_message.jsp" %>
<!DOCTYPE html>
<html>
<head>

    <form:form id="fsave" name="fsave" modelAttribute="wizardFormController" method="${wizardFormController.metodoV}"  action="./wizard/save/" >
    
	<style type="text/css">
	
		.menumegaimagen{position:absolute;
		left:0px;
		top:33px;
		z-index:-1;
		}
		.geFooterContainer{
		background-color:#00426f;
	
		}
		.geToolbarContainer{
		    height: 105px;
		    left: 0px;
		    right: 0;
		    top: 0px;
		    width: 1063px;
		    z-index:20;
		}
	
		.geSidebarContainer .geTitle { color:#606060; }
		.geSidebar .geItem:hover { opacity:1; }
		.geSidebar .geItem { opacity:0.7; }
		.geSidebarContainer .geTitle input {
			font-size:8pt;
			color:#606060;
		}
		.geBlock {
			z-index: -3;
			margin:100px;
			margin-top:40px;
			margin-bottom:30px;
			padding:50px;
			padding-bottom:40px;
			padding-top:20px;
			border-radius:10px;
			-webkit-box-shadow:0px 0px 4px 4px #e5e5e5;
			-moz-box-shadow:0px 0px 4px 4px #e5e5e5;
			box-shadow:0px 0px 4px 4px #e5e5e5;
			_filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=4, OffY=4, Color='#e5e5e5', Positive='true');
			border:1px solid gray;
			background-color:white;
		}
		.geBlock p {
			padding-top:10px;
		}
		.geEditor {
			background-color:whiteSmoke;
		}
		.geEditor ::-webkit-scrollbar {
		    width:12px;
		    height:12px;
		}
		.geEditor ::-webkit-scrollbar-track {
			background:whiteSmoke;
			-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);
		}
		.geEditor ::-webkit-scrollbar-thumb {
			background:#c5c5c5;
		    border-radius:10px;
			border:whiteSmoke solid 3px;
		}
		.geEditor ::-webkit-scrollbar-thumb:hover {
			background:#b5b5b5;
		}
		.pruebaimage{
			background-color:#000000;
		}
	</style>

	
	

	<script src="${pageContext.request.contextPath}/js/js_hdiseno/tinymce/tinymce.min.js"></script>

	<script type="text/javascript">
	
	
		function changeText(){
			document.getElementById('remplacetext').innerHTML = 'Fred Flinstone';
		}
	
		var t0 = new Date();
	
		// Public global variables
		var MAX_REQUEST_SIZE = 10485760;
		var MAX_WIDTH = 12000;
		var MAX_HEIGHT = 12000;
	
		// CUSTOM_PARAMETERS - URLs for save and export
		// URLs for save and export
		var EXPORT_URL = '/export';
		var SAVE_URL = '/save';
		var OPEN_URL = '/open';
		var RESOURCES_PATH = '${pageContext.request.contextPath}/js/resources_hdiseno';
		var RESOURCE_BASE = RESOURCES_PATH;
		var STENCIL_PATH = '${pageContext.request.contextPath}/js/stencils_hdiseno';
		var IMAGE_PATH = '${pageContext.request.contextPath}/images/images_hdiseno';
		var STYLE_PATH = '${pageContext.request.contextPath}/css/styles_hdiseno';
		var CSS_PATH = '${pageContext.request.contextPath}/css/styles_hdiseno';
		var OPEN_FORM = 'open.html';

		// Paths and files
		var STENCIL_PATH = '${pageContext.request.contextPath}/js/stencils_hdiseno';
		var SHAPES_PATH = '${pageContext.request.contextPath}/js/shapes_hdiseno';
		var IMAGE_PATH = '${pageContext.request.contextPath}/images/images_hdiseno';
		// Path for images inside the diagram
		var GRAPH_IMAGE_PATH = '${pageContext.request.contextPath}/images/img_hdiseno';
		var ICONFINDER_PATH = 'iconfinder';
		var STYLE_PATH = '${pageContext.request.contextPath}/css/styles_hdiseno';
		var CSS_PATH = '${pageContext.request.contextPath}/css/styles_hdiseno';
		var OPEN_FORM = 'open.html';
		var TEMPLATE_PATH = '${pageContext.request.contextPath}/js/templates_hdiseno';
		
		// Directory for i18 files and basename for main i18n file
		var RESOURCES_PATH = '${pageContext.request.contextPath}/js/resources_hdiseno';
		var RESOURCE_BASE = RESOURCES_PATH + '/dia';
	
		// Specifies connection mode for touch devices (at least one should be true)
		var tapAndHoldStartsConnection = true;
		var showConnectorImg = true;

		/**
		 * Parses URL parameters. Supported parameters are (precedence in given order):
		 * 
		 * - lang=xy: Specifies the language of the user interface
		 * - touch=1: Enables a touch-style user interface
		 * - tmp=name: Loads /templates/name.xml
		 * - libs=key1;key2;...;keyN: Specifies the libraries
		 * - storage=local: Enables HTML5 local storage
		 * - picker=0: Disables the Google image picker
		 * - picker=1: Enables Google image picker without image upload
		 * - picker=2: Enables Google image picker with image upload
		 * - tiny=0: Do not use tinyMCE for HTML editing
		 * - tiny=1: Use the default config for tinyMCE
		 * - tiny=2: Use the IE config for tinyMCE
		 * - flash=1: Enables Flash for saving
		 * - aa=0: Disables anti aliasing
		 * - url=url: Opens diagram from URL (URL should be encoded)
		 * - share=ID of shared diagram
		 * - analytics=0: Disables Google Analytics
		 * - rotation=1: Enables rotation handle
		 * - gapi=0: Do not load Google APIs
		 * - rt=0: Do not start rt
		 * - nerd=1: Includes all the weird stuff
		 * --
		 * - sharehost=URL for sharing: For developers only
		 * - export=URL for export: For developers only
		 * - test=1: For developers only
		 * - dev=1: For developers only
		 */
		var urlParams = (function(url)
		{
			var result = new Object();
			var idx = url.lastIndexOf('?');
	
			if (idx > 0)
			{
				var params = url.substring(idx + 1).split('&');
				
				for (var i = 0; i < params.length; i++)
				{
					idx = params[i].indexOf('=');
					
					if (idx > 0)
					{
						result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
					}
				}
			}
			
			return result;
		})(window.location.href);

		/**
		 * Synchronously adds scripts to the page.
		 */
		function mxscript(src)
		{
			document.write('<script src="'+src+'"></scr' + 'ipt>');
		};

		/**
		 * Asynchronously adds scripts to the page.
		 */
		function mxinclude(src)
		{
			var g = document.createElement('script'); g.type = 'text/javascript'; g.async = true; g.src = src;
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(g, s);
		};
		
		// Sets the base path, the UI language via URL param and configures the
		// supported languages to avoid 404s. The loading of all core language
		// resources is disabled as all required resources are in grapheditor.
		// properties. Note that in this example the loading of two resource
		// files (the special bundle and the default bundle) is disabled to
		// save a GET request. This requires that all resources be present in
		// the special bundle.
		var mxLoadResources = false;
		var mxLanguage = urlParams['lang'];
		var mxLanguages = ['es'];
		var geBasePath = '${pageContext.request.contextPath}/js/js_hdiseno';
		var mxBasePath = '${pageContext.request.contextPath}/css/mxgraph_hdiseno';
                
		
		// Used to request grapheditor/mxgraph sources in dev mode
		var mxDevUrl = '';

		// Customizes sharing host
		var share = urlParams['sharehost'];
		
		var driveDomain = window.location.hostname == '' ||
							window.location.hostname == '' ||
							urlParams['rt'] == '1';
		
		if (share != null)
		{
			SHARE_HOST = share;
		}

		// Customizes export URL
		var ex = urlParams['export'];
		
		if (ex != null)
		{
			EXPORT_URL = ex;
		}

		// Changes paths for local development environment
		if (urlParams['dev'] == '1')
		{
			geBasePath = mxDevUrl + '${pageContext.request.contextPath}/js/js_hdiseno';
			mxBasePath = mxDevUrl + '${pageContext.request.contextPath}/javascript/src';
			mxscript(mxBasePath + '${pageContext.request.contextPath}/js/mxClient.js');

			// Adds external dependencies
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/spin/spin.min.js');
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/sharejs/socket.io.js');
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/sharejs/share.uncompressed.js');
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/sharejs/json.uncompressed.js');
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/deflate/rawdeflate.js');
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/deflate/base64.js');
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/stately/Stately.js');
			
			// Adds all JS code that depends on mxClient. This indirection via Devel.js is
			// required in some browsers to make sure mxClient.js (and the files that it
			// loads asynchronously) are available when the code loaded in Devel.js runs.
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/diagramly/Devel.js');
		}
		else
		{
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/diagramly.min.js');
		}

		

		// Testing shapes
		if (urlParams['test'] == '1')
		{
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/diagramly/Test.js');
		}

		// Loads JSON for older browsers
		if (typeof(JSON) == 'undefined')
		{
			mxscript('${pageContext.request.contextPath}/js/js_hdiseno/json/json2.min.js');
		}

		// Adds basic error handling
		window.onerror = function()
		{
			var status = document.getElementById('geStatus');
			
			if (status != null)
			{
				status.innerHTML = 'La pagina no pudo ser cargada';
			}
		};
              
	</script>
</head>

<body class="geEditor">
<div id="geInfo">
	<div class="geBlock">
		<h1>Servintegra</h1>
		<p>Herramienta de Dise&ntilde;o de Formularios</p>
		<p>
	</div>
	<div class="geBlock" style="margin-top:20px;padding:0px;text-align:center;">
		<h3 id="geStatus">Cargando. Por favor espere...</h3>
	</div>
</div>

<div id="geFooter" style="visibility:hidden;padding-top:6px;padding-left:6px;background-color:#00426f;color:#FFFFFF; text-align: center;">

	Ministerio de Hacienda 2013 <br>
Boulevard de los H&eacute;roes No. 1231, San Salvador <br>
Rep&uacute;blica de El Salvador, C.A. <br>
PBX (503) 2244-3000 / 2237-3000
</div>
    
</form:form>    
<!-- Main -->
<script type="text/javascript">
(function()
{
	// Adds basic error handling
	window.onerror = function(message,url,linenumber)
	{
		try
		{
			if (message != null && message.indexOf('Script error.') != -1)
			{
				// TODO log external domain script failure
				// "Script error." is reported when the error occurs in a script
				// that is hosted on a domain other than the domain of the current
				// page
			}
			else
			{
				var img = new Image();
	    		img.src = "${pageContext.request.contextPath}/images/images_hdiseno/1x1.png?msg=" + encodeURIComponent(message) + "&url=" + encodeURIComponent(url) + "&lnum=" + encodeURIComponent(linenumber);
			}
		}
		catch (err)
		{
			
		}
	};

	var ui = new EditorUi(new Editor());

	//overrides the listener to avoid setting modified flag to true for RT changes
	ui.editor.graphChangeListener = function(eventSource, eventObject) 
	{
		var rtChange = eventObject.properties['rtChange'] || false;
		if(!rtChange) 
		{
			this.modified = true;
			
		}
	};
})();

// Color dialog - Do not add to diagramly.min.js due to path issues!
mxscript('${pageContext.request.contextPath}/js/js_hdiseno/jscolor/jscolor.js');

// For developers only
if (urlParams['test'] == '1' || urlParams['dev'] == '1')
{
	mxLog.show();
	mxLog.debug('Started in ' + (new Date().getTime() - t0.getTime()) + 'ms');
	mxLog.debug('Share:', SHARE_HOST);
	mxLog.debug('Export:', EXPORT_URL);
	mxLog.debug('Development mode:', (urlParams['dev'] == '1') ? 'active' : 'inactive');
	mxLog.debug('Test mode:', (urlParams['test'] == '1') ? 'active' : 'inactive');
}
</script>

<style type="text/css">
	
	.bgeSprite-new{
	 background: url("${pageContext.request.contextPath}/images/images_hdiseno/new.jpg") no-repeat scroll left top transparent;
    height: 69px;
    left: 0;
    position: absolute;
    top: -10px;
    width: 99px;
	}
	.geSprite-new{
		background:none;
	}
	
	
	
	.bgeSprite-open{
	 background: url("${pageContext.request.contextPath}/images/images_hdiseno/open.jpg") no-repeat scroll left top transparent;
	   height: 69px;
    left: 105px;
    position: absolute;
    top: -10px;
    width: 99px;
	}
	.geSprite-open{
		background:none;
	}
	
	
	.bgeSprite-save{
	 background: url("${pageContext.request.contextPath}/images/images_hdiseno/save.jpg") no-repeat scroll left top transparent;
    height: 69px;
    left: 176px;
      position: absolute;
    top: -10px;
    width: 99px;
	}
	.geSprite-save{
		background:none;
	}
	

	
	.bgeSprite-preview{
	 background: url("${pageContext.request.contextPath}/images/images_hdiseno/preview.jpg") no-repeat scroll left top transparent;
    height: 69px;
    left: 210px;
    position: absolute;
    top: -10px;
    width: 99px;
	}
	.geSprite-preview{
		background:none;
	}
	
	.bgeSprite-import{
	 background: url("${pageContext.request.contextPath}/images/images_hdiseno/import.jpg") no-repeat scroll left top transparent;
    height: 69px;
    left: 352px;
    position: absolute;
    top: -10px;
    width: 99px;
	}
	
	
	.geSprite-import{
		background:none;
	}
	
	
	.bgeSprite-export{
	 background: url("${pageContext.request.contextPath}/images/images_hdiseno/export.jpg") no-repeat scroll left top transparent;
    height: 69px;
    left: 440px;
    position: absolute;
    top: -11px;
    width: 99px;
	}
	.geSprite-export{
		background:none;
	}
	
	
	      
	  
	
	
	.geToolbar .geSeparator {
	float:left;
	width:1px;
	height:30px;
	background:#e5e5e5;
	margin-left:6px;
	margin-right:6px;
}
.geToolbar .geButton {
	float:left;
	
	padding:0px 2px 0px 2px;
	margin:2px;
	padding-bottom:4px;
	border:1px solid transparent;
	cursor:pointer;
	opacity:0.5;
	_filter:alpha(opacity=50);
}
.geToolbar .geButton:hover {
	border:1px solid gray;
	border-radius:2px;
	opacity:1;
	_filter:none !important;
}
.geToolbar .geButton:active {
	border:1px solid black;
}
	.geDiagramContainer{background-color:#a9a9a9;}
	.geToolbarContainer{z-index:0;}
	.geMenubarContainer{  background-color: #2086B3;
    height: 33px;
    left: 0;
    padding: 0 771px 0 0;
    right: 0;
    top: 0;}
	.geToolbarContainer{ background-color: #f0f0f0;
   height: 105px;
    left: -7px;
    right: 0;
    top: 100px;
    width: 1063px;}
	</style>
</body>
</html>
